<template>
  <div class="governance_main">
    <v-header headTitle="透明治理" goBack="true" hidden='true'></v-header>
    <ol>
      <div class="li_list">
        <li>
          <router-link to="InCome" replace>
            <div class="div1">
              <span>共有收入</span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link to="GoverPay" replace>
            <div class="div2">
              <span>共有支出</span>
            </div>
          </router-link>
        </li>
        <li>
          <router-link to="GoverAll" replace>
            <div class="div3">
              <span>共有汇总</span>
            </div>
          </router-link>
        </li>
      </div>
    </ol>
    <!--显示子路由内容部分-->
    <router-view></router-view>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'

  export default {
    name: 'Governance',
    data () {
      return {}
    },
    components: {
      'v-header': headTop
    },
    created () {
    },
    methods: {}
  }
</script>

<style lang="scss">
  .governance_main {
    padding-top: 40px;
    ol {
      height: 50px;
      border-bottom: 1px solid #d7d7d7;
      list-style: none;
      background: #fff;
      right: 0;
      left: 0;
      position: fixed;
      z-index: 666;
      padding-left: 10%;
      .li_list {
        li {
          width: 30%;
          float: left;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: 1px solid #d7d7d7;
          margin-top: 5px;
          a {
            width: 100%;
            color: #000000;
            font-size: 15px;
            font-weight: bolder;
            text-align: center;
            text-decoration: none;
          }
          a.active {
            font-size: 15px;
            font-weight: bolder;
            div {
              background: #0c7ad9;
              height: 40px;
              span {
                color: #fff;
              }
            }
            .div1 {
              border-top-left-radius: 5px;
              border-bottom-left-radius: 5px;
            }
            .div3 {
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
            }
          }
        }
        li:first-child {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          border-right: none;
        }
        li:last-child {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
          border-left: none;
        }
      }
    }
  }

</style>
